<!DOCTYPE html>
<html lang="en">
<head>
    <title>mbot GUI</title>
    <link rel="stylesheet" href="../static/css/mbot_gui.css" type="text/css">
</head>
<body>
    <main class="wrapper">
        <div class="aiming"></div>
        <div class="grid-a" style="background-image: url({{ url_for('video_feed') }})">
            <div class="fan">
                <img src="../static/images/fan.png">
                <input id="maxFanSpeed" type="range" min="0" max="255" step="5" value="200">
                <output id="maxFanSpeedDisplay">255</output>
            </div>

            <div class="rec">
                <img id="rec" src="../static/images/rec.png">
            </div>

            <div class="controller" id="joystick">
                <div class="grid-b">
                    <div class="forward" id="forward"></div>
                    <div class="left" id="left"></div>
                    <div class="stop" id="stop"></div>
                    <div class="right" id="right"></div>
                    <div class="backward" id="backward"></div>
                </div>
            </div>

            <div class="speed">
                <img src="../static/images/speed.png">
                <input id="maxLinearSpeed" type="range" min="0.0" max="1.0" step="0.2" value="0.8">
                <output id="maxLinearSpeedDisplay">1.0</output>
            </div>

            <div class="widget" id="widget">
                <div class="grid-e">
                    <img id="camera" src="../static/images/camera.png">
                    <img id="video" src="../static/images/video.png">
                    <img id="voice" src="../static/images/voice.png">
                </div>
            </div>
        </div>
    </main>

    <script src="../static/js/mbot_gui.js"></script>
</body>
</html>